<template>
  <view>
    <view @tap="SelectDepartment">
      <up-input :placeholder="placeholder" v-model="role.name" border="surround" readonly :customStyle="{
        width: '83vw',
        pointerEvents: 'none'
      }"></up-input>
    </view>

    <up-picker :show="show" keyName="name" :columns="columns" @confirm="confirm" @cancel="show = false"
      :closeOnClickOverlay="true" @close="closePopup"></up-picker>

  </view>
</template>

<script>
import base from '@/apis/cloud/base';
import componentMinxins from '../ComponentMinxins';

export default {
  name: "RolePicker",
  mixins: [componentMinxins],
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: '请选择岗位'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    itemId: {
      type: String,
      required: true
    },
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data () {
    return {
      role: {
        id: '',
        name: '',
        type: ''
      },
      show: false,
      columns: [],
      fuzhiItemid: null
    }
  },
  watch: {
    role: {
      handler (newValue) {
        let value = uni.getStorageSync('formData');
        var formItems = JSON.parse(value.formItems);
        formItems.forEach(item => {
          if (item.title == this.title) {
            item.value = newValue;
            uni.setStorageSync(item.id, [newValue]);
          }
        })
      }
    }
  },
  created () {
    uni.$on('RolePicker', (value) => {
      if (value?.fuzhiItemid === this.itemId) {
        this.role = value;
        this.selectedDept = value
        // console.log('this.role', this.role);
      }
    })
  },
  onUnload () {
    uni.$off('RolePicker')
  },
  mounted () {
    let value = uni.getStorageSync('formData');
    let formItems = JSON.parse(value.formItems);
    formItems.forEach(item => {
      if (item.title == this.title) {
        uni.removeStorageSync(`${item.id}`);
      }
    })
    this.getRoleData();
    this.setechodata()
  },
  methods: {
    // 选择部门
    SelectDepartment () {
      this.fuzhiItemid = this.itemId
      uni.navigateTo({
        url: `/pages/apply/form/components/Jobpage?fuzhiItemid=${this.itemId}&title=选择${this.title}`
      });
    },
    async getRoleData () {
      const msg = await base.getGroupData({ type: 'role' });
      this.columns = [msg.data];
    },
    confirm (event) {
      // console.log(event)
      this.show = false;
      this.role = event.value[0];
    },
    closePopup () {
      this.show = false;
    },
    setechodata(){
      if (this.ApplyDetailList && this.ApplyDetailList.formData  && this.itemId)  {
        if (this.ApplyDetailList.formData.hasOwnProperty(this.itemId))  {
          const fieldValue = this.ApplyDetailList.formData[this.itemId];       
          if (Array.isArray(fieldValue)  && fieldValue.length  > 0) {
            this.role = fieldValue[0] || {};
          } else { 
            this.role = fieldValue[0] || {};
          }
        }
      }
    }
  }
}
</script>

<style></style>
